<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
</head>
<body>
<!--弹窗：预算附件-->
<div th:fragment="budgetinfoetailAttach" class="modal inmodal fade" id="budgetinfoetailAttach_Modal"
     tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="budgetinfoetailAttach_modalTitle">预算附件</h4>
                <p id="budgetinfoetailAttach_modalDesc" class="font-bold text-danger"></p>
            </div>
            <div class="modal-body">


                <div class="row">
                    <div class="col-md-12">
                        <span class="btn btn-primary fileinput-button">
                            <i class="fa fa-plus"></i>
                            <span>选择文件</span>
                            <input id="budgetinfoetailAttach_fileupload" type="file" name="fileupload" multiple>
                        </span>
                    </div>
                </div>

                <div id="budgetinfoetailAttach_lightBoxGallery" class="lightBoxGallery row">

                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>

    <script id="budgetinfoetailAttach_img_item_tmpl" type="text/x-jquery-tmpl">
    <div class="col-md-2 d-flex flex-column" id="budgetinfoetailAttach_img_${attch.id}">
        <img src="${attch.thumbnailPath}" originalSrc="${attch.viewPath}" alt="${attch.realName}" style="border: solid 1px #cdcdcd;">
        <div>
            <a data-id="${attch.id}" onclick="budgetinfoetailAttachObj.deleteHandler(this)" class="trash btn btn-white btn-bitbucket text-success" data-toggle="tooltip" title="删除">
                <i class="fa fa-trash"></i>
            </a>
        </div>
    </div>


    </script>
    <script id="budgetinfoetailAttach_pdf_item_tmpl" type="text/x-jquery-tmpl">
    <div class="col-md-2 d-flex flex-column" id="budgetinfoetailAttach_pdf_${attch.id}">
        <a href="${attch.viewPath}" title="${attch.realName}" target="_blank" class="p-t-xs" style="width: 100px;height:100px;font-size:70px;">
            <i class="fa fa-file-pdf-o"></i>
        </a>
        <div>
            <a data-id="${attch.id}" onclick="budgetinfoetailAttachObj.deleteHandler(this)" class="trash btn btn-white btn-bitbucket text-success" data-toggle="tooltip" title="删除">
                <i class="fa fa-trash"></i>
            </a>
        </div>
    </div>


    </script>

    <script type="text/javascript">
        $(function () {
            $('#budgetinfoetailAttach_lightBoxGallery').viewer({
                url: 'originalSrc',
                zIndex: 9999
            });
        })
        var budgetinfoetailAttachObj = new Object({
            myModal: $('#budgetinfoetailAttach_Modal'),
            detailId: undefined,
            init: function (detailId) {
                this.detailId = detailId;
                this.initUpload(detailId)
                this.loadImg(detailId)
                this.toggleModal(true);
            },
            toggleModal: function (show) {
                this.myModal.modal(show ? 'show' : 'hide');
            },
            initUpload(detailId){
                let _self = this;
                $('#budgetinfoetailAttach_fileupload').fileupload({
                    dataType: 'json',
                    singleFileUploads: false,
                    maxNumberOfFiles: 10,
                    maxFileSize: 5 * 1024 * 1024,
                    minFileSize: 10 * 1024,
                    acceptFileTypes: /(\.|\/)(gif|GIF|jpe?g|JPE?G|png|PNG|pdf|PDF)$/i,
                    messages: {
                        maxNumberOfFiles: '一次最多上传10个文件',
                        maxFileSize: '单个文件不能大于5MB',
                        minFileSize: '文件不能小于50KB',
                        acceptFileTypes: '只允许上传pdf和图片'
                    },
                    url: `/budget/tbudgetinfodetailattach/upload/${detailId}`,
                    done(e, data) {
                        if (data.result && data.result.code === 0) {
                            _self.loadImg(detailId);
                        } else {
                            toastr.error(data.result.msg, '操作失败')
                        }
                    },
                    processfail(e, data) {
                        let errorFiles = data.files.filter(o => {
                            return o.error;
                        });
                        toastr.error(errorFiles[0].error, '操作失败')
                    },
                    fail(e, data) {
                        let _status = data._response.jqXHR.status;
                        switch (_status) {
                            case 413:
                                toastr.error("文件太大，单个文件不能超过5MB", '操作失败')
                                break;
                        }
                    }
                });
            },
            loadImg: function (detailId) {
                let _self = this;
                $('#budgetinfoetailAttach_lightBoxGallery').empty()
                $.myGet({
                    url: `/budget/tbudgetinfodetailattach/list/${detailId}`,
                    success: function (data) {
                        if (data && data.code === 0) {
                            _self.showAttch(data.list.map(o=>{
                                o.viewPath = data.domain + o.pathRelative;
                                o.thumbnailPath = data.domain + o.thumbnailPath;
                                return o;
                            }));
                        } else {
                            toastr.error(data.msg, '操作失败')
                        }
                    }
                })
            },
            showAttch: function (attachs) {
                attachs.map(o => {
                    if (o.suffix == 'pdf' || o.suffix == 'PDF') {
                        $('#budgetinfoetailAttach_pdf_item_tmpl').tmpl({attch: o}).appendTo($('#budgetinfoetailAttach_lightBoxGallery'));
                    } else {
                        $('#budgetinfoetailAttach_img_item_tmpl').tmpl({attch: o}).appendTo($('#budgetinfoetailAttach_lightBoxGallery'));
                    }

                });
                $('#budgetinfoetailAttach_lightBoxGallery').viewer('update');
            },
            deleteHandler(e) {
                let _self = this;
                $.mySwalConfirm("将删除附件，确认吗？", function () {
                    $.myDelete({
                        url: `/budget/tbudgetinfodetailattach`,
                        dataType: 'json',
                        data: [e.dataset.id],
                        success: function (data) {
                            if (data && data.code == 0) {
                                toastr.success(data.msg, '操作提示')
                                _self.loadImg(_self.detailId);
                            } else {
                                toastr.error(data.msg, '操作失败')
                            }
                        }
                    })
                });
            }
        })
    </script>
</div>
</body>
</html>